<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link href="css/reset.css" rel="stylesheet" />
    <link href="css/index.css" rel="stylesheet" />
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <title>Login</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>

<body>
    <div class="LoginBox">
        <div class="LoginVerticalCenteredBox">
            <div class="LoginHead">
                Smart Home Management System
            </div>
            <div class="LoginUserBoxOut ">
                <div class="LoginUserBox mar_top30">
                    <span aria-hidden="true"> </span>
                    <span class="fa fa-envelope-o" aria-hidden="true"></span>
                    <input required="required" class="LoginUserInput" placeholder="Phone Number" name="phone"
                        id="username" required />
                </div>
            </div>
            <div class="LoginUserBoxOut">
                <div class="LoginUserBox">
                    <span aria-hidden="true"> </span>
                    <span class="fa fa-key" aria-hidden="true"></span>
                    <input required="required" class="LoginUserInput" placeholder="Password" type="password"
                        id="password" name="password" required />
                </div>
            </div>
            <div class="LoginUserBoxOut">
                <div class="LoginLastBox clearfix">
                    <div class="leftBox">
                        <label for="inputcheck"></label>
                        <a href="/register"><span>No account? Goto Register!</span></a>
                        <br />
                        <br />
                        <a href="/register"><span>First family member? Goto Register Family!</span></a>
                        <br />
                        <br />
                        <br />
                    </div>
                    <div class="RightBox">
                        <button id="loginButton" class="RightBox">Login</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        document.getElementById("loginButton").onclick = function login() {
            console.log("login");
            axios.post('/login', {
                username: document.getElementById("username").value,
                password: document.getElementById("password").value
            })
                .then(function (response) {
                    console.log(response);
                    if (response.data.success == 1) {
                        //localStorage.setItem(token, response.data.data.token);
                        window.location.href = "./equipment";
                    }else{
                        alert("Invalid username or password!");
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
    </script>
</body>


</html>